<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vCard - Blog</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="address=no">
        <meta name="author" content="ArtTemplate">
        <meta name="description" content="vCard">
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@ArtTemplates">
        <meta name="twitter:title" content="vCard">
        <meta name="twitter:description" content="vCard">
        <meta name="twitter:image" content="assets/images/social.jpg">
        <meta property="og:title" content="ArtTemplate">
        <meta property="og:type" content="website">
        <meta property="og:url" content="your url website">
        <meta property="og:image" content="assets/images/social.jpg">
        <meta property="og:description" content="vCard">
        <meta property="og:site_name" content="vCard">
        <link rel="stylesheet" type="text/css" href="static/css/style.css">
        <link rel="stylesheet" type="text/css" href="static/css/style-demo.css">
    </head>
    <body>
        <div class="preloader">
            <div class="preloader__wrap">
                <div class="circle-pulse">
                    <div class="circle-pulse__1"></div>
                    <div class="circle-pulse__2"></div>
                </div>
                <div class="preloader__progress">
                    <span></span>
                </div>
            </div>
        </div>
        <main class="main">
            <div class="header-image">
                <div class="js-parallax" style="background-image: url(static/image/bg.jpg);"></div>
            </div>
            <div class="container gutter-top">
                <header class="header box">
                    <div class="header__left">
                        <div class="header__photo">
                            <img class="header__photo-img" src="static/image/bg.jpg" alt="陈小鹏">
                        </div>
                        <div class="header__base-info">
                            <h4 class="title titl--h4">陈小鹏</h4>
                            <div class="status">前端开发</div>
                            <ul class="header__social">
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-facebook1"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-twitter1"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="font-icon icon-instagram1"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="header__right">
                        <ul class="header__contact">
                            <li>
                                <span class="overhead">Email</span>
                                775964415@qq.com
                            </li>
                            <li>
                                <span class="overhead">Phone</span>
                                18718873370
                            </li>
                        </ul>
                        <ul class="header__contact">
                            <li>
                                <span class="overhead">Birthday</span>
                                1992.05
                            </li>
                            <li>
                                <span class="overhead">Location</span>
                                汕头
                            </li>
                        </ul>
                    </div>
                </header>
                <div class="row sticky-parent">
                    <aside class="col-12 col-md-12 col-lg-2">
                        <div class="sidebar box sticky-column">
                            <ul class="nav">
                                <li class="nav__item">
                                    <a href="index.html">
                                        <i class="icon-user"></i>
                                        个人简介
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="resume.html">
                                        <i class="icon-file-text"></i>
                                        履历
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="works.html">
                                        <i class="icon-codesandbox"></i>
                                        作品
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a class="active" href="">
                                        <i class="icon-book-open"></i>
                                        Blog
                                    </a>
                                </li>
                                <li class="nav__item">
                                    <a href="contact.html">
                                        <i class="icon-book"></i>
                                        联系方式
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </aside>
                    <div class="col-12 col-md-12 col-lg-10">
                        <div class="box box-content">
                            <div class="pb-2">
                                <h1 class="title title--h1 first-title title__separate">Blog</h1>
                            </div>
                            <div class="news-grid">
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            16<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_02.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">Design Conferences in 2019</h2>
                                        <p>Veritatis et quasi architecto beatae vitae dicta sunt,explicabo.</p>
                                    </div>
                                </article>
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            15<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_06.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">Best Fonts Every Designer</h2>
                                        <p>Sed ut perspiciatis,nam libero tempore,cum soluta nobis est eligendi.</p>
                                    </div>
                                </article>
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            14<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_08.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">Design Digest #80</h2>
                                        <p>Excepteur sint occaecat cupidatat no proident,quis nostrum exercitationem ullam corporis suscipit.</p>
                                    </div>
                                </article>
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            13<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_07.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">UI Interactions of the week</h2>
                                        <p>Enim ad minim veniam,consectetur adipiscing elit,quis nostrud exercitation ullamco laboris nisi.</p>
                                    </div>
                                </article>
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            12<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_05.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">The Forgotten Art of Spacing</h2>
                                        <p>Maxime placeat,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </article>
                                <article class="news-item box">
                                    <div class="news-item__image-wrap overlay overlay--45">
                                        <div class="news-item__date">
                                            10<span>Jun</span>
                                        </div>
                                        <a class="news-item__link" href="single-post.html"></a>
                                        <img class="cover lazyload" src="static/picture/image_01.jpg" alt="">
                                    </div>
                                    <div class="news-item__caption">
                                        <h2 class="title title--h4">Design Digest #79</h2>
                                        <p>Optio cumque nihil impedit uo minus quod maxime placeat,velit esse cillum.</p>
                                    </div>
                                </article>
                            </div>
                        </div>
                        <footer class="footer">© 2023 vCard</footer>
                    </div>
                </div>
            </div>
        </main>
        <div class="back-to-top"></div>
        <svg class="svg-defs">
            <clippath id="avatar-box">
                <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"></path>
            </clippath>
            <clippath id="avatar-hexagon">
                <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"></path>
            </clippath>
        </svg>
        <script src="static/js/jquery-3.4.1.min.js"></script>
        <script src="static/js/plugins.min.js"></script>
        <script src="static/js/common.js"></script>
        <script src="static/js/plugins-demo.js"></script>
    </body>
</html>
